<template>
    <div style="margin: 46px 0">
        <nav-bar :head="head"></nav-bar>
        <div class="pro-detail">
            <van-card
                num="1"
                :tag="'-'+((detail.price - detail.discount_price)/detail.price * 100).toFixed(2)+'%'"
                :price="detail.discount_price"
                :title="detail.product_name"
                :thumb="detail.product_image"
                :origin-price="detail.price"
                currency="$"
            />
        </div>
        <div>
            <h5 style="margin: 10px 20px;">联系方式：</h5>
            <div style="padding: 10px;">
                <!-- 输入任意文本 -->
                <van-field  placeholder="请输入邮箱" v-model="email" label="邮箱：" />
                <!-- 输入手机号，调起手机号键盘 -->
                <van-field placeholder="请输入微信号" v-model="wx" label="微信号：" />
            </div>
        </div>
        <van-submit-bar currency="$" :price="parseFloat(detail.discount_price)*100" button-text="提交订单" @submit="onSubmit">
            <template #tip>
                提交订单后将会有客服人员联系您，请耐心等候哦，您也可以直接添加我们的客服微信，收款后我们会第一时间为您发货！
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Card } from 'vant';
    import { SubmitBar } from 'vant';
    import { Field } from 'vant';
    import { Toast } from 'vant';

    Vue.use(Toast);
    Vue.use(Field);
    Vue.use(SubmitBar);
    Vue.use(Card);
    export default {
        name: "order",
        data(){
            return {
                head: '商品购买',
                detail: {},
                email: '',
                wx:''
            }
        },
        created() {
            this.onLoad();
        },
        methods :{
            onLoad: function () {
                var detail = this.$route.params.product;
                if (detail){
                    this.detail = detail;
                    localStorage.setItem('current_product',JSON.stringify(detail));
                }else {
                    this.detail = JSON.parse(localStorage.getItem('current_product'));
                }
            },
            onSubmit: function () {
                var this_ = this;
                if (this_.wx==''){
                    Toast.fail('请填写微信号');
                    return;
                }
                var data = {
                    'product_id': this_.detail.id,
                    'user_id':JSON.parse(localStorage.getItem('userInfo')).id,
                    'email': this_.email,
                    'wx': this_.wx
                }
                this.$api.main.Order(data).then(res => {
                    console.log(res.data)
                    if (res.data.success){
                        Toast.success(res.data.msg)
                        setTimeout(function () {
                            this_.$router.replace('/car')
                        },1500)
                    }else{
                        Toast.fail(res.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .van-cell{
        background: #fafafa !important;
    }
</style>
